<template>
    <div>
      <div class="fire-data clear">
        <div class="left clear">
          <i class="iconfont icon-yangantanceqi left"></i>
          <div class="left">
            <p>累计发生<span class="fire-color">烟感预警</span></p>
            <p class="mt5"><span class="camera-number">{{smoke}}</span>次</p>
          </div>
        </div>
        <div class="right clear">
          <i class="iconfont icon-huo left"></i>
          <div class="left ">
            <p>累计发生<span class="fire-color">明火</span>事件</p>
            <p class="mt5"><span class="camera-number">{{fire}}</span>次</p>
          </div>
        </div>
      </div>
      <p class="t-center">火情类型统计</p>
      <div class="relative fire-source">
        <div
          v-for="item in fireSourceList"
          :class="{'fire-source-border': item.border}"
          ref="sourceList"
          :style="{
            width: `${item.width}px`,
            height: `${item.width}px`,
            top: `${item.top}px`,
            left: `${item.left}px`}">
          <div class="fire-source-bg" ref="sourceBg" v-if="item.background"></div>
          <div class="fire-source-nei"
            :style="{
            marginTop: `${14 / 2}px`,
            marginLeft: `${14 / 2}px`,
            width: `${item.width - 14}px`,
            height: `${item.width - 14}px`}">
            <p class="source-name" :style="{marginTop: `${(item.width - 45) / 2}px`}">{{item.name}}</p>
            <p class="source-length">{{item.value}}次</p>
          </div>
        </div>
      </div>
      <p class="t-center">火情报警来源</p>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'fire',
    data () {
      return {
        smoke: 0,
        fire: 0,
        fireSourceList: [],
        fireSourceData: [],
        sourceList: [
          {name: '材料推放区', length: 1, top: 40, left: 180, width: 90, border: true, background: true}
        ],
        sourceList2: [
          {name: '材料推放区', length: 1, top: 40, left: 90, width: 90, border: true, background: true},
          {name: '3号塔吊', length: 2, top: 40, left: 270, width: 90, border: true, background: true}
        ],
        sourceList3: [
          {name: '材料推放区', length: 1, top: 0, left: 90, width: 90, border: true, background: true},
          {name: '3号塔吊', length: 2, top: 0, left: 270, width: 90, border: true, background: true},
          {name: '4号塔吊', length: 1, top: 90, left: 20, width: 70},
          {name: '6号塔吊', length: 1, top: 90, left: 190, width: 70},
          {name: '6号塔吊', length: 1, top: 90, left: 340, width: 80},
          {name: '6号塔吊', length: 1, top: 120, left: 110, width: 80},
          {name: '6号塔吊', length: 1, top: 110, left: 270, width: 60},
          {name: '6号塔吊', length: 1, top: 5, left: 10, width: 60},
          {name: '6号塔吊', length: 1, top: 5, left: 195, width: 60},
          {name: '6号塔吊', length: 1, top: 145, left: 70, width: 60},
          {name: '6号塔吊', length: 1, top: 140, left: 210, width: 60}
        ]
      }
    },
    computed: {
      ...mapGetters({
        incomingAIVideoNode: 'incomingAIVideoNode'
      })
    },
    watch: {
      incomingAIVideoNode (item) {
        this.initData()
      },
      '$route' (to, from) {
        if (to.name === 'AIvideo') {
          this.initData()
        }
      }
    },
    mounted () {
      this.initData()
    },
    methods: {
      initData () {
        this.monitorVideoCatch().then(() => {
          switch (this.fireSourceData.length) {
            case 1:
              this.fireSourceList = this.setPosition(this.sourceList)
              break
            case 2:
              this.fireSourceList = this.setPosition(this.sourceList2)
              break
            default:
              this.fireSourceList = this.setPosition(this.sourceList3)
              break
          }
          this.$nextTick(() => {
            this.initVelocity()
          })
        })
      },
      monitorVideoCatch () {
        return new Promise((resolve) => {
          const data = {
            'projectId': this.$route.query.pjId
          }
          this.$axios({
            method: 'post',
            closeLoading: true,
            closeSaveRequest: true,
            url: `${this.$site.videoServer}/api/monitorVideoCatch/selFireCount`,
            data: this.$qs.stringify(data)
          }).then(res => {
            this.fireSourceData = res.data.data.fireSourceList
            res.data.data.fireTypeList.forEach(item => {
              if (Number.parseInt(item.id) === 2) {
                this.fire = item.value
              }
              if (Number.parseInt(item.id) === 3) {
                this.smoke = item.value
              }
            })
            resolve()
          })
        })
      },
      setPosition (items) {
        return this.fireSourceData.map((item, index) => {
          item.top = items[index].top
          item.left = items[index].left
          item.width = items[index].width
          if (items[index].width) {
            item.border = items[index].border
            item.background = items[index].background
          }
          return item
        })
      },
      initVelocity () {
        this.$refs.sourceList.forEach((el, index) => {
          setTimeout(() => {
            this.$velocity(el, {
              translateY: -4
            }, {
              loop: true
            })
          }, 1000 * index)
        })
      }
    }
  }
</script>

<style scoped lang='scss'>
  .fire-data{
    margin: 20px 0 20px 0;
    .fire-color{
      color: #00e8ff;
    }
    .camera-number{
      font-size: 20px;
      color: #fff;
    }
    .icon-yangantanceqi{
      font-size: 40px;
      margin: 0 15px 0 0;
      color: #ffc600;
    }
    .icon-huo {
      font-size: 40px;
      margin: 0 15px 0 0;
      color: #e64747;
    }
  }
  .fire-source{
    width: 100%;
    height: 200px;
    margin-top: 40px;
    font-size: 12px;
    >div{
      background: #0e3651;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      .fire-source-nei{
        background: #175786;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px #29a2ff solid;
        .source-name{
          color: #fff;
        }
        .source-length{
          color: #00e8ff;
          margin-top: 5px;
        }
      }
    }
    .fire-source-border{
      border: 2px #196299 solid;
    }
    .fire-source-bg{
      background-image: url("/static/images/bgy-source-bg.png");
      width: 109px;
      height: 109px;
      position: absolute;
      top: -9px;
      left: -10px;
    }
  }
</style>
